<template>
  <div>
    <div class="login">
      <!-- 登陆账号 -->
      <p class="login-account-number">登录账号</p>
      <!-- 登录页面标题 -->
      <p class="login-title">虾米 - 严选商城欢迎您</p>
      <!-- 登录手机号加密码 -->
      <van-form validate-first @failed="onFailed">
        <van-field
          class="login-phone-password"
          v-model="phone"
          name="patternOne"
          placeholder="手机号码"
          :rules="[{ pattern:/^ \d{11} $/, message: '请正确填写手机号码' }]"
        />
        <!-- pattern -->
        <van-field
          class="login-phone-password"
          v-model="password"
          type="password"
          name="petternTwo"
          placeholder="密码"
          :rules="[{ pattern:/^ \d{6,8} $/, message: '请正确填写密码' }]"
        />
        <van-button native-type="submit" type="info" class="login-click">登录</van-button>
      </van-form>

      <!-- 忘记加注册 -->
      <div class="forget-register">
        <p class="forget" @click="toForget">忘记密码</p>
        <p class="register" @click="toRegister">还没有注册？立即注册</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      phone: "",
      password: "",
      isShow: false,
      patternOne: /^ \d{11} $/,
      petternTwo: /^ \d{6,8} $/
    };
  },
  methods: {
    toRegister() {
      this.$router.push({
        path: "/register"
      });
    },
    toForget(){
       this.$router.push({
        path: "/forget"
      });
    },
    dain() {
      this.isShow = true;
    },
    dian() {
      this.isShow = false;
    },
    onSubmit(values) {
      values = this.$router.push("/user");
      console.log("submit", values);
    },
    onFailed(errorInfo) {
      console.log("failed", errorInfo);
    }
  }
};
</script>

<style scoped>
/* 登录账号 */
.login {
  width: 90%;
  height: 9rem;
  border: 1px solid #eee;
  margin: 0 auto;
  margin-top: 0.5rem;
}
.login-account-number {
  font-size: 0.5rem;
  margin-top: 0.44rem;
  margin-left: 1rem;
}
.login-title {
  font-size: 0.25rem;
  margin-top: 0.44rem;
  margin-left: 1rem;
  color: gray;
}
.login-phone-password {
  width: 5rem;
  /* height: 0.86rem; */
  border-radius: 0.12rem;
  background: #f5f5f5;
  border: 1px solid #f5f5f5;
  margin-top: 0.44rem;
  margin-left: 1rem;
}
.login-phone-password span {
  color: #999;
}
.login-phone-password input {
  outline: none;
  border: 0rem solid red;
  /* line-height: 0.76rem; */
  margin-top: 0.27rem;
  background: #f5f5f5;
  margin-left: 0.1rem;
}
.login-click {
  width: 3rem;
  display: flex;
  justify-content: center;
  border-radius: 0.1rem;
  color: white;
  /* 背景 */
  background: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%);
  /* 阴影 */
  box-shadow: 0 5px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 5px;
  /* 定位 */
  position: relative;
  top: 1rem;
  left: 2rem;
}
.forget-register {
  position: relative;
  top: 1.5rem;
  left: 2rem;
}
.forget {
  color: gray;
  font-size: 0.2rem;
  margin-left: 1rem;
}
.register {
  color: #549ff9;
  margin-left: 0.2rem;
  margin-top: 0.5rem;
}
.right {
  padding-left: 1.2rem;
}
</style>